<template>
  <!-- 搜索框 -->
  <el-form :model="form" ref="ruleFormRef">
    <el-form-item label="主题" prop="theme">
      <el-input v-model="form.theme" autocomplete="off" placeholder="输入主题" />
    </el-form-item>

    <div style="left:500px;top: -50px;">
      <el-form-item label="时间" prop="date" style="width: 400px;">
        <el-date-picker v-model="form.date" @change="onOk" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />

      </el-form-item>
    </div>
    <div style="top: -40px; width: 340px;">
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="form.content" autocomplete="off" placeholder="输入内容" />
      </el-form-item>
    </div>

    <div style="top: -30px;">
      <el-form-item label="地点" prop="address">
        <el-input v-model="form.address" autocomplete="off" placeholder="输入地点" />
      </el-form-item>
    </div>
    <div style="left: 500px;top: -150px;">
      <el-form-item label="搭档" prop="partner">
        <el-input v-model="form.partner" autocomplete="off" placeholder="合作伙伴" />
      </el-form-item>
    </div>

    <div style="left: 500px;top: -130px;">
      <el-form-item label="类别" prop="type">
        <el-select v-model="form.type" placeholder="选择类别">
          <el-option label="不选" value="" />
          <el-option label="生活" value="生活" />
          <el-option label="娱乐" value="娱乐" />
          <el-option label="工作" value="工作" />
          <el-option label="学习" value="学习" />
        </el-select>
      </el-form-item>
    </div>
    <div style="top: -120px;">
      <el-form-item label="完成" prop="status">
        <el-select v-model="form.status" placeholder="选择是否完成">
          <el-option label="不选" value="" />
          <el-option label="完成" value="1" />
          <el-option label="未完成" value="0" />
        </el-select>
      </el-form-item>
    </div>
    <div style="top: -170px;left: 620px;">
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </div>
  </el-form>

  <!-- 搜索出来的东西 -->
  <div style="top: -120px;">
    <!-- user.todaylist  直接使用 不要再重新定义 否则先我一步 -->
    <!-- 下拉滚动 -->
    <div class="demo-scroll-top" ref="scroll">
      <el-table :data="user.searchlist.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        style="width: 1100px">
        <el-table-column fixed prop="startDate" label="时间" width="160">
          <template #default="scope">
            {{ scope.row.startDate }} {{ scope.row.endDate }}
          </template>
        </el-table-column>
        <el-table-column prop="theme" label="主题" width="80" />
        <el-table-column prop="content" label="内容" width="200" />
        <el-table-column prop="address" label="地点" width="100" />
        <el-table-column prop="partner" label="搭档" width="100" />
        <el-table-column prop="type" label="类别" width="90" />
        <el-table-column prop="status" label="完成" width="100">
          <!-- 状态改变 -->
          <template #default="scope">
            <el-switch v-model="scope.row.status" inline-prompt
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
              :inactive-value="0" active-text="是" inactive-text="否" @click="change(scope.row.id, scope.row.status)" />
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small"
              @click="edit(scope.row.id, scope.row.startDate.substring(0, 10))">编辑</el-button>
            <el-button link type="primary" size="small"
              @click="del(scope.row.id, scope.row.startDate.substring(0, 10))">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div><br>
    <div style="left: 250px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="user.searchlist.length">
      </el-pagination>

    </div>
  </div>

  <!-- 修改页面 Start -->
  <!-- z-index 弹窗层级 -->
  <el-dialog v-model="visible" title="修改待办">
    <div>
      <a-form ref=" formRef" :model="form2" :style="{ width: '480px' }" @submit="handleSubmit">
        <a-form-item field="theme" label="主题" :rules="[{ required: true, message: '请填写主题' }, { message: '输入待办主题' }]"
          :validate-trigger="['change', 'input']">
          <a-input v-model="form2.theme" placeholder="输入待办主题" />
        </a-form-item>
        <a-form-item field="content" label="待办内容" :rules="[{ required: true, message: '请填写内容' }, { message: '输入待办事项' }]"
          :validate-trigger="['change', 'input']">
          <a-input v-model="form2.content" placeholder="输入待办事项" />
        </a-form-item>

        <a-form-item label="时间">
          <div class="block">
            <el-date-picker style="width: 380px;background-color:#F2F3F5" v-model="form2.date" @change="onOk"
              type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" range-separator="-" start-placeholder="开始时间"
              end-placeholder="结束时间" />
          </div>
        </a-form-item>

        <a-form-item field="address" label="地点" :rules="[{ required: true, message: '请填写地点' }, { message: '输入地点' }]"
          :validate-trigger="['change', 'input']">
          <a-input v-model="form2.address" placeholder="输入地点" />
        </a-form-item>

        <a-form-item label="选择搭档">
          <el-select v-model="form2.partner" placeholder="选择" style="background-color:#F2F3F5">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </a-form-item>

        <a-form-item field="radio" label="类别" :rules="[{ message: 'must select one' }]">
          <a-radio-group v-model="form2.type">
            <a-radio value="生活">生活</a-radio>
            <a-radio value="娱乐">娱乐</a-radio>
            <a-radio value="工作">工作</a-radio>
            <a-radio value="学习">学习</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit">提交</a-button>&nbsp&nbsp
            <!-- <a-button @click="$refs.formRef.resetFields()">重置</a-button> -->
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </el-dialog>
  <!-- 修改页面 END -->

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { FormInstance, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus';
import userCount from '@/stores/userCount.js'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

const user = userCount()
const ruleFormRef = ref<FormInstance>()

let startDate = ref('')
let endDate = ref('')

/* 分页 */
const currentPage = ref(1)// 当前页码
const total = ref(0) // 当前页码
const pageSize = ref(5)// 当前页码

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  currentPage.value = 1;
  pageSize.value = val;
}
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}

const form = reactive({
  theme: '',
  content: '',
  address: '',
  type: '',
  partner: '',
  status: '',
  date: ['', ''],
  startDate: startDate,
  endDate: endDate,
  userId: user.userid,
})

let form2 = reactive({
  theme: '',
  content: '',
  address: '',
  type: '',
  partner: '',
  status: '',
  date: ['', ''],
  userId: user.userid,
})

const value1 = ref<[Date, Date]>([
  new Date(),
  new Date()
])



function onOk(dateString) {
  startDate = dateString[0],
    endDate = dateString[1]
  console.log(startDate)
  console.log(endDate)
}


const options = [
  {
    value: '',
    label: '不选',
  },
  {
    value: '陈叶菁',
    label: '陈叶菁',
  },
  {
    value: '王鹏程',
    label: '王鹏程',
  },
  {
    value: '王宇航',
    label: '王宇航',
  },
  {
    value: '朱训',
    label: '朱训',
  }
]

/* 改变状态 */
const change = (id, status) => {
  if (status == '1') {
    axios.put('http://8.130.43.203:8080/content/updateStatus', { "id": id, "userId": user.userid, "status": status }).then(resp => {
      user.todolist = resp.data
      axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form).then(resp => {
        user.searchlist = resp.data
        console.log("345");
      })
    })
  } else {
    axios.put('http://8.130.43.203:8080/content/updateStatus', { "id": id, "userId": user.userid, "status": status }).then(resp => {
      user.todolist = resp.data
      axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form).then(resp => {
        user.searchlist = resp.data
        console.log(user.searchlist);
      })
    })
  }
}

/* 搜索功能 */
const search = () => {
  axios.post('http://8.130.43.203:8080/content/findByAnyWhat', {
    theme: form.theme,
    content: form.content,
    address: form.address,
    type: form.type,
    partner: form.partner,
    status: form.status,
    startDate: form.date[0],
    endDate: form.date[1],
    userId: user.userid,
  }).then(resp => {
    user.searchlist = resp.data
    console.log(user.searchlist);
  })
  console.log(form);

}

/* 删除操作 */
const del = (id, day) => {
  ElMessageBox.confirm(
    '确定删除吗?',
    '消息',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      /* 删除请求 */
      axios.post('http://8.130.43.203:8080/content/deleteTodo',
        { "id": id, "userId": user.userid }).
        then(resp => {
          user.todolist = resp.data
          /* 再查 */
          axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form).then(resp => {
            user.searchlist = resp.data
            console.log(user.searchlist);
          })
        })

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

/* 修改页面是否可见 */
let visible = ref(false)
const todoid = ref('')

/* 打开修改页面 */
const edit = (id, day) => {
  todoid.value = id
  visible.value = true
  console.log(todoid.value);
  axios.get('http://8.130.43.203:8080/content/findById/' + id).then(resp => {
    user.updatelist = resp.data
    /* 数据回显 */
    form2.theme = user.updatelist.theme
    form2.content = user.updatelist.content
    form2.address = user.updatelist.address
    form2.partner = user.updatelist.partner
    form2.date[0] = user.updatelist.startDate
    form2.date[1] = user.updatelist.endDate
    form2.type = user.updatelist.type
  })
}

/* 重置 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form).then(resp => {
    user.searchlist = resp.data
    console.log(user.searchlist);
  })
}

/* 提交修改代办 */
const handleSubmit = ({ values, errors }) => {
  console.log(values);
  axios.put('http://8.130.43.203:8080/content/updateTodo', {
    "id": todoid.value,
    "theme": values.theme,
    "content": values.content,
    "address": values.address,
    "startDate": values.date[0],
    "endDate": values.date[1],
    "type": values.type,
    "partner": values.partner
  }).then(resp => {
    /* 再获取所有数据 可能修改了时间 */
    axios.post('http://8.130.43.203:8080/content/todo/' + user.userid).then(resp => {
      user.todolist = resp.data
      axios.post('http://8.130.43.203:8080/content/findByAnyWhat', form).then(resp => {
        user.searchlist = resp.data
      })
    })
  })
  ElMessage({
    message: '修改成功',
    type: 'success',
  })
  visible.value = false
}

</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.demo-scroll-top {
  height: 360px;
  overflow: auto;

}

.demo-scroll-top p {
  padding: 12px;
}
</style>